<template>
  <div class="detail top-page" ref="detailRef">
    <tab-control 
    class="tabs" 
    v-if="showTabControl" 
    :titles="['描述','设施','房东','须知','位置']"
    @tabItemClick="tabClick"
    ></tab-control>
    <van-nav-bar
      title="房屋详情"
      left-text="路途"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main" v-if="mainPart" v-memo="[mainPart]">
      <detail-swipe :swipe-data="mainPart.topModule.housePicture.housePics"/> 
      <detail-info :ref="getSectionRef" :top-infos="mainPart.topModule"/>
      <detail-facility :ref="getSectionRef" :house-facility="mainPart.dynamicModule.facilityModule.houseFacility"/>
      <detail-landlord :ref="getSectionRef" :landlord-module="mainPart.dynamicModule.landlordModule"/>
      <detail-notice :ref="getSectionRef" :notice="mainPart.dynamicModule.rulesModule.orderRules"/>
      <detail-map :ref="getSectionRef" :position="mainPart.dynamicModule.positionModule"></detail-map>
      <detail-price :price-intro="mainPart.introductionModule"/>
    </div>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from "vue-router";
import { getDetailInfos } from '@/service'
import tabControl from '@/components/tab-control/tab-control.vue'
import detailSwipe from './cpns/detail_01-swipe.vue'
import detailInfo from './cpns/detail_02-info.vue'
import detailFacility from './cpns/detail_03-facility.vue'
import detailLandlord from './cpns/detail_04-landlord.vue'
import detailNotice from './cpns/detail_05-notice.vue'
import detailMap from './cpns/detail_06-map.vue'
import detailPrice from './cpns/detail_07-price.vue'
import useScroll from '@/hooks/useScroll.js'

const router = useRouter()
const route = useRoute()
const houseId = route.params.id

// 发送网络请求
const detailInfos = ref({})
const mainPart = computed(() => detailInfos.value.mainPart)
getDetailInfos(houseId).then(res => {
  detailInfos.value = res.data
})

// 监听返回按钮
const onClickLeft = () =>{
  router.back()
}

//tabControl相关的操作
const detailRef = ref()
const { scrollTop } = useScroll(detailRef)
const showTabControl = computed(() => {
  return scrollTop.value > 300
})

const sectionEls = []
const getSectionRef = (value) => {
  if(!value) return 
  sectionEls.push(value.$el)
}
const tabClick = (index) => {
  let distance = sectionEls[index].offsetTop - 44
  detailRef.value.scrollTo({
    top: distance,
    behavior: "smooth"
  })
}
</script>

<style lang="less" scoped>
  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }
  .top-page{
    position: relative;
    z-index: 9;
    height: 100vh;
    background-color: #fff;
    overflow-y: auto;
  }
</style>
